<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生违纪情况</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>

    <style>
        /*设置背景*/
        body{
            background-color: #faf5f3;
        }
        /*最上方图片居中*/
        #img_four_1{
            height: 134px;
            width: 522px;
            margin: auto;
            margin-top: 20px;
            margin-bottom: 100px;
        }
        #div_four_size{
            width: 500px;
            margin: auto;
        }
        /*表单项*/
        .td_left{
            width: 100px;
            height:30px;
            text-align: right;
            padding-top: 30px;
        }
        .td_right{
            width: 400px;
            height:30px;
            padding-left: 10px;
            padding-top: 30px;
        }
        /*按钮*/
        #btn_sub{
            margin-top: 20px;
            margin-left: 50%;
        }
    </style>
    <script>
        //给两个表单项添加正则表达式
        //学号 数字7--15位
        function checkSid() {
            var sid = $("#sid").val();
            var reg = /^\d{7,15}$/;
            return reg.test(sid);
        }
        //违纪情况
        function checkCause() {
            var cause = $("#cause").val();
            var reg = /^[\u4e00-\u9fa5]+$/
            return reg.test(cause);
        }

        $(function () {
            //表单提交
            $("#violate_form").submit(function () {
                if (checkSid() && checkCause()){
                    $.get("tea/addViolate",$("#violate_form").serialize(),function (data) {
                        if (data){
                            alert("添加成功！");
                            location.reload();
                        }else{
                            alert("该学号不存在！")
                        }
                    },"json");
                }
                return false;
            });

            //学号
            $("#sid").blur(function () {
                if (checkSid()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //违纪原因
            $("#cause").blur(function () {
                if (checkCause()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
        });
    </script>

</head>
<body>
<div id="img_four_1"><img src="../img/tea_2.png" id="img_hint"></div>

<div id="div_four_size">
    <form action="#" method="get" id="violate_form">
        <table>
            <tr>
                <td class="td_left">
                    <label for="sid">学号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="sid" name="sid" placeholder="请输入违纪学生的学号"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="cause">违纪原因</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="cause" name="cause" placeholder="请输入违纪原因"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="提交"></td>
            </tr>
        </table>
    </form>
</div>
<div style="float: right;margin-right: 150px">
    <a href="tea_main_page.html"  class="btn btn-info">返回主界面</a>
</div>
</body>
</html>